<template>
    <div class="container">
        <div>
            <span @click="tui()">X</span>
            <el-input v-model="input" />
            <button @click="fa()">发布</button>
        </div>
        <div style="display: flex;">
            <div style="border: 1px solid #ccc;width: 600px;">
                <Toolbar
                    style="border-bottom: 1px solid #ccc"
                    :editor="editorRef"
                    :defaultConfig="toolbarConfig"
                    :mode="mode"
                />
                <Editor
                    style="height: 500px; overflow-y: hidden;"
                    v-model="valueHtml"
                    :defaultConfig="editorConfig"
                    :mode="mode"
                    @onCreated="handleCreated"
                />
            </div>
            <div style="width: 400px;">{{ input }}</div>
        </div>
        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
     <div style="width: 100%; height: 40px; border-bottom: 2px solid #ccc;">页面属性</div>
     <p>封面:<el-input v-model="input1" /></p>
     <p>路径:<el-input v-model="input2" /></p>
     <p>顺序:<el-input v-model="input3" /></p>
    <button @click="guan()" style="display: flex; right: 0; bottom: 0; padding: 3px; margin: 20px;">确认</button>
  </el-drawer>
    </div>
</template>
  
  <script lang="ts">
import { useRoute } from 'vue-router'
import '@wangeditor/editor/dist/css/style.css'
import { ElMessage } from 'element-plus'
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {  jianq} from '../../api'
export default {
    components: { Editor, Toolbar },
    setup() {
        const drawer = ref(false)

        const input = ref('')
        const input1 = ref('')
        const input2 = ref('')
        const input3 = ref('')
        // 文章管理添加操作
        const data = ref('')
        var d = new Date();  //获取时间
        var hour = d.getHours(); //获取小时
        var minute = d.getMinutes();//获取分 bn
        var second = d.getSeconds();//获取秒
        console.log(d.getFullYear()); //年
        console.log(d.getMonth() + 1);  //月
        console.log(d.getDate())   //日
        console.log(hour, minute, second);  //小时分钟秒
        data.value = '' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + ' ' + hour + ':' + minute + ':' + second

        const fa = () => {
            console.log(input);
        //    页面创建
             drawer.value=true
           
        }


        const editorRef = shallowRef()

        // 内容 HTML
        const valueHtml = ref('<p>hello</p>')

        // 模拟 ajax 异步获取内容
        onMounted(() => {
            setTimeout(() => {
                valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
            }, 1500)
        })

        const toolbarConfig = {}
        const editorConfig = { placeholder: '请输入内容...' }

        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        })

        const handleCreated = (editor: any) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }
        const tui = () => {
            window.location.href = "/Pagemanagement"
        }
        const guan=()=>{
            drawer.value=false
            jianq({data,input,input1,input2,input3}).then(res=>{
                console.log(res);
                
            })
        }
        return {

            editorRef,
            valueHtml,
            mode: 'default', // 或 'simple'
            toolbarConfig,
            editorConfig,
            handleCreated,
            input,
            input1,
            input2,
            input3,
            fa,
            tui,
            drawer,
            guan
        }
    }
}
</script>
  
  <style scoped lang="scss">
</style>
  